@page "/rich-text-editor/markdown-preview"

@using Syncfusion.Blazor.RichTextEditor;
@using Markdig;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This sample demonstrates how to preview markdown changes in Rich Text Editor.
        Type or edit the display text, and apply format to view the preview of markdown.
        You can preview the markdown changes immediately in the preview area.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        The Rich Text Editor allows you to preview markdown changes immediately using <code>preview</code>.
        The third-party library <code>Markdig</code> is used in this sample to convert markdown into HTML content.
    </p>
</ActionDescription>
<div class="control-section">
    @if (!IsPreview)
    {
        <SfRichTextEditor SaveInterval="1" EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownValue">
            <RichTextEditorToolbarSettings Items="@Tools">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="Preview">
                        <Template>
                            <button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="PreviewClick">
                                <span class="e-btn-icon e-md-preview e-icons"></span>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
            <RichTextEditorEvents ValueChange="@OnValueChange" />
        </SfRichTextEditor>
    }
    else
    {
        <SfRichTextEditor Readonly="true" @bind-Value="@HtmlValue">
            <RichTextEditorToolbarSettings Items="@Items">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="code">
                        <Template>
                            <button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="CodeClick">
                                <span class="e-btn-icon e-preview e-icons"></span>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
        </SfRichTextEditor>
    }
</div>

@code{
    private bool IsPreview { get; set; }
    private string HtmlValue { get; set; }
    private MarkdownPipeline Pipeline { get; set; }

    private string MarkdownValue { get; set; } = @"The sample is added to showcase **markdown editing**.
Type or edit the content and apply formatting to view markdown formatted content.
We can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/rich-text-editor/markdown-custom-format).
The third-party library **Marked** is used in this sample to convert markdown into HTML content.";

    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>() {
        new ToolbarItemModel() { Name = "code", TooltipText = "Code View" },
    };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Name = "Preview", TooltipText = "Preview" },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };

    protected override void OnInitialized()
    {
        Pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
        this.HtmlValue = Markdig.Markdown.ToHtml(MarkdownValue, Pipeline);
        base.OnInitialized();
    }

    private void OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        if (args.Value == null)
        {
            this.HtmlValue = null;
        }
        else
        {
            this.HtmlValue = Markdig.Markdown.ToHtml(args.Value, Pipeline);
        }
    }

    private void PreviewClick()
    {
        this.IsPreview = true;
    }

    private void CodeClick()
    {
        this.IsPreview = false;
    }
}

<style>
    .e-icon-btn .e-preview::before {
        content: '\e790';
    }

    .bootstrap4 .e-icon-btn .e-md-preview::before {
        content: '\e787';
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .bootstrap4 .e-icon-btn.e-active .e-view-side::before {
        content: '\e350';
    }

    .bootstrap4 .e-icon-btn .e-view-side::before {
        content: '\e350';
    }

    .tailwind .e-icon-btn .e-md-preview::before {
        content: '\e7d0';
    }

    .tailwind .e-icon-btn .e-preview::before {
        content: '\e748';
    }

    .e-icon-btn .e-active .e-view-side::before {
        content: '\e350';
    }

    .e-icon-btn .e-view-side::before {
        content: '\e350';
    }
</style>